import Layer from '../../core/Layer';
import Text from '../../base/Text';

export default class extends Layer {
    constructor(canvas, style, data = []) {
        super(canvas, style);
        this.data = data;
        this.start = style.start || 0;
        this.end = style.end || data.length;
        this.cols = style.cols || 5;
        this.xStep = style.xStep || (this.width / (this.cols));

    }

    get height() {
        return parseInt(this.fontSize);
    }

    build(painter) {
        this.childs.splice(0);
        const xStep = this.width / this.cols;
        const barNum = Math.floor(this.width / this.xStep);
        let dataLen = Math.floor((this.end - this.start) / (barNum) * this.cols);
        let xLen = Math.floor(barNum / this.cols);
        for (let i = 0; i <= dataLen; i++) {
            const txt = new Text(this.canvas, {
                fontSize: this.fontSize,
                fontFamily: this.fontFamily,
                color: this.color,
                text: this.data[this.start + i * xLen],
                type: Text.TYPE.FILL,
                textAlign: 'center',
                position: 'absolute',
                bottom: 0,
                left: i * xStep,
            });
            if (i === 0) {
                txt.textAlign = 'left';
            }
            if (this.cols === i) {
                txt.textAlign = 'right';
            }
            this.addChild(txt);
        }
    }
}
